<template>
    <div class="home-container">
        <div class="home-content">
            <!-- <div class="side-menu">
                <side-menu></side-menu>
            </div> -->
            <router-view/>
        </div>
        
    </div>
</template>



<script>
    import SideMenu from "./common/SideMenu";
     export default {
        name: 'MyHome',
        components: {SideMenu}
    }
</script>

<style lang="scss">
.home-container {
    background-color: #f8f8f8;
    min-height: calc(100vh - 60.67px);
    padding: 20px 0;
    box-sizing: border-box;
    .home-content {
        background-color: #fff;
        border-radius: 20px;
        margin: 0 auto;
        display: flex;
        align-items: flex-start;
        width: 60vw;
        max-width: 1000px;
    }
}

/* 响应式调整 */
@media screen and (max-width: 1200px) {
    .home-container { 
        .home-content {
            width: 80vw;
        }
    }
    
}

@media screen and (max-width: 768px) {
    .home-container {
        padding: 0;
        min-height: calc(100vh - 80.67px);
        background-color: #fff;
        .home-content {
            width: 100%;
            border-radius: 0;
        }
    }
}
</style>